 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="JQ多功能焦点图" />
<meta name="description" content="基于JQ，实现多功能焦点图，好用的焦点图，兼容IE6" />
<title>魔蝎焦点图v1.2</title>
<script type="text/javascript" src="mystatics/js/jquery.min.js"></script>
<script type="text/javascript" src="mystatics/js/mx-slide.js"></script>
</head>
<body style="padding:15px 30px; background:#f9f9f9">
<p><b>　QQ群：Web前端JavaScript<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=005e26fc32422224a44a0148c6d4f9d2e7f9b0807e58af168c5a678554c18c6e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Web前端-JavaScript" title="Web前端-JavaScript"></a>(1929 8868 1)</b></p>
<div style="clear:both; height:20px;"></div>
<input type="button" id="cli" value="click" />
<!-- mx-slide-fade -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-fade.css" />
<div id="mx-fade">
	<div class="mx-hidden">
	<div class="mx-width">
		<div class="mx-content">
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/4.jpg" title="" alt="" /></a>
		</div>
	</div>
	</div>
	<div class="mx-bg"></div>
	<div class="mx-title">
			<a href="#" title="焦点测试篇之渐变篇 —— 一">焦点测试篇之渐变篇 —— 一</a>
			<a href="#" title="焦点测试篇之渐变篇 —— 二">焦点测试篇之渐变篇 —— 二</a>
			<a href="#" title="焦点测试篇之渐变篇 —— 三">焦点测试篇之渐变篇 —— 三</a>
			<a href="#" title="焦点测试篇之渐变篇 —— 四">焦点测试篇之渐变篇 —— 四</a>
			<a href="#" title="焦点测试篇之渐变篇 —— 五">焦点测试篇之渐变篇 —— 五</a>
	</div>
	<div class="mx-change"></div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<br />
<!-- mx-slide-left -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-left.css" />
<div id="mx-left">
	<div class="mx-hidden">
	<div class="mx-width">
		<div class="mx-content">
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/4.jpg" title="" alt="" /></a>
		</div>
	</div>
	</div>
	<div class="mx-change"></div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<br/>
<!-- mx-slide-top -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-top.css" />
<div id="mx-top">
	<div class="mx-hidden">
	<div class="mx-width">
		<div class="mx-content">
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/4.jpg" title="" alt="" /></a>
		</div>
	</div>
	</div>
	<div class="mx-change"></div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<script>
/*
	.find() //选择块 —— 默认 '.mx-content a'
	.mode() //选择模式 'fade'||'left'||'top' —— 默认 'fade'
	.time() //切换时间 —— 默认 5000
	.speed() //切换速度 —— 默认 500
	.auto() //是否自动播放 true||false —— 默认 true
	.change() //定义序列标签 —— 默认 'span'
	.event() //定义序列选择事件 —— 默认 'mouseover'
	.num() //是否显示序列数字 true||false —— 默认 true
	.delay() //序列选中延迟 —— 默认 100
	.key()  //按钮延迟 —— 默认 300
	.start(fn) //轮播开始 —— 'function'
	//注：所有参数设置必须在 .start() 轮播开始之前
*/
mx_slide('#mx-fade').start(function(i){ $('#mx-fade .mx-title a').eq(i).fadeIn().siblings().stop().fadeOut() });
mx_slide('#mx-left').mode('left').start(function(i){ });
mx_slide('#mx-top').mode('top').start();
</script>
</body>
</html>